<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';

// 创建一个 ref 用来绑定 DOM 元素
const chartRef = ref(null);

onMounted(() => {
  // 在组件挂载后初始化图表
  const myChart = echarts.init(chartRef.value);

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {
      data: ['平均分', '前10%名次', '分数分布']
    },
    xAxis: [
      {
        type: 'category',
        data: ['语文', '数学', '英语', '物理', '化学', '生物', '历史', '政治', '地理'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '分数',
        min: 0,
        max: 150,
        interval: 30,
        axisLabel: {
          formatter: '{value} 分'
        }
      }
    ],
    series: [
      {
        name: '平均分',
        type: 'line',
        itemStyle: {
          color: 'red'
        },
        data: [90, 85, 95, 80, 75, 85, 88, 92, 87]
      },
      {
        name: '前10%名次',
        type: 'line',
        itemStyle: {
          color: 'purple'
        },
        data: [130, 120, 140, 115, 110, 125, 128, 132, 127]
      },
      {
        name: '分数分布',
        type: 'bar',
        itemStyle: {
          color: 'rgb(172, 203, 252)'
        },
        data: [120, 110, 125, 105, 100, 115, 118, 122, 117]
      }
    ]
  };

  // 设置图表的配置项和数据
  myChart.setOption(option);
});
</script>

<template>
  <!-- 使用 ref 绑定 DOM 元素 -->
  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>
